<template>
  <div :class="['job-item', { hot }]" @click="handleDetail">
    <div class="company fs-24 color-grey">
      <div class="name">
        <img class="m-r-10" :src="jobData.brandLogo" alt="" />
        {{ jobData.brandName }}
      </div>
      <i class="iconfont icon-bookmark-o"></i>
    </div>
    <h2 class="fs-28">{{ jobData.jobName }}</h2>
    <p class="fs-22 margin-tb color-grey">
      {{ jobData.cityName }}·{{ jobData.areaDistrict }}
    </p>
    <p class="fs-24 color-grey intro">
      我们正在寻找项目经理，您可以在这里申请。
      良好的多任务处理是这个角色的加分项。
    </p>
  </div>
</template>

<script setup lang="ts">
import { JobType } from "../types/pro";
import { useRouter } from "vue-router";
const router = useRouter();
interface JobItemProps {
  jobData: JobType;
  hot?: boolean;
}
const props = defineProps<JobItemProps>();

const handleDetail = () => {
  router.push(`/detail/${props.jobData.objectId}`);
};
</script>

<style lang="scss" scoped>
.job-item {
  border: 1px solid rgba(238, 238, 238, 1);
  padding: 3.2rem;
  margin-bottom: 3.2rem;
  flex-shrink: 0;
}
.hot {
  width: 28rem;
}
.company {
  font-size: 2.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2.4rem;
  img {
    width: 4rem;
    height: 4rem;
  }
  .name {
    display: flex;
    align-items: center;
  }
}
.intro {
  line-height: 4rem;
}
.margin-tb {
  margin: 2rem 0;
}
.fs-22 {
  font-size: 2.2rem;
}
.fs-24 {
  font-size: 2.4rem;
}
.fs-28 {
  font-size: 2.8rem;
}
.color-grey {
  color: rgba(102, 110, 122, 1);
}
</style>
